<style text='text/css'>
.image_material{
    border: 1px dashed #ddd;
    width: 80px;
    height: 198px;
    background: #eee;
    text-align: center;
    color: #333;
    display: block;
    float: left;
    margin-left:10px;
    position:relative;
}
.image_material a:hover{
    background: #fff;
}
.image_material .select_image{
  border: 1px dashed #ddd;
  display: block;
  width: 78px;
  height: 160px;
  line-height: 160px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #eee;
}
.image_material .delete{
  border: 1px dashed #ddd;
  display: block;
  width: 78px;
  height: 36px;
  line-height: 36px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: #eee;
}
.upload-img-box .appmsg_item{
  padding: 0px;
  width: 306px;
  height: 198px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.uploadrow2{
  border: 1px dashed #ddd;
  width: 306px;
  height: 198px;
  background: #eee;
  z-index: 888;
}
.uploadrow2 .upload-img-box .upload-pre-item2 img,
.uploadrow2 .upload-img-box .upload-pre-item2{
    width: 306px;
  height: 198px;
}
.upload-img-box,
.upload-img-box img{
  width: 306px;
  height: 198px;
}
</style>
<div class="tools">           
  <span class="btn" onClick="change(1)">多客服开关</span>
  <span class="btn" onClick="change(2)">多客服配置</span>
  <span class="btn" onClick="change(4)">用户查询在线客服列表</span> 
</div>
<div class="form-item cf showdiv showdiv1">
  <label class="item-label"> 开启微信人工客服: </label>
  <div class="controls">
      <div class="check-item">
      <input type="radio" name="config[state]" value="1" class="regular-radio" id="config[state]_1" onClick="changeOption()">
      <label for="config[state]_1"></label>开启
      </div>
    <div class="check-item">
      <input type="radio" name="config[state]" value="0" class="regular-radio" id="config[state]_0" onClick="changeOption()">
      <label for="config[state]_0"></label>关闭
      </div>
  </div>
</div>

<!--客服在线时的自定义回复内容-->
<div class="offline showdiv showdiv2">
<div class="form-item cf">
  <label class="item-label"> 转人工客服: <span class="check-tips">转人工客服关键词，支持多个关键词，关键词之间用 “|” 隔开</span></label> 
  <div class="controls">
    <input type="text" name="config[zrg]" class="text input-large" value="{$data.config.zrg.value}">
  </div>
</div>
<div class="form-item cf">
  <label class="item-label"> 接入客服会话后自动回复: <span class="check-tips">配置参数：[name] 自动替换当前接入客服的昵称</span></label> 
  <div class="controls">
    <input type="text" name="config[jrkf]" class="text input-large" value="{$data.config.jrkf.value}">
  </div>
</div>
<div class="form-item cf">
  <label class="item-label"> 转接客服会话后的自动回复: <span class="check-tips">配置参数：[name] 自动替换当前接入客服的昵称</span></label> 
  <div class="controls">
    <input type="text" name="config[zjkf]" class="text input-large" value="{$data.config.zjkf.value}">
  </div>
</div>
<div class="form-item cf">
  <label class="item-label"> 关闭客服会话后的自动回复: <span class="check-tips">用户主动或者客服关闭会话后的自动回复</span></label> 
  <div class="controls">
    <input type="text" name="config[gbkf]" class="text input-large" value="{$data.config.gbkf.value}">
  </div>
</div>
<div class="form-item cf">
  <label class="item-label"> 客服都不在线: <span class="check-tips">客服不在线时候，用户转接人工客服时，设定的自动回复</span></label> 
  <div class="controls">
    <input type="text" name="config[kfbz]" class="text input-large" value="{$data.config.kfbz.value}">
  </div>
</div>
<div class="form-item cf">
  <label class="item-label"> 指定客服不在线: <span class="check-tips">指定客服不在线时候的自动回复</span></label> 
  <div class="controls">
    <input type="text" name="config[zdkfbz]" class="text input-large" value="{$data.config.zdkfbz.value}">
  </div>
</div>

<div class="form-item cf">
  <label class="item-label"> 开启多客服助手接待: </label>
  <div class="controls">
      <div class="check-item">
      <input type="radio" name="config[model2]" value="0" class="regular-radio" id="config[model2]_0" >
      <label for="config[model2]_0"></label>开启
      </div>
    <div class="check-item">
      <input type="radio" name="config[model2]" value="2" class="regular-radio" id="config[model2]_2" >
      <label for="config[model2]_2"></label>关闭
      </div>
  </div>
</div>

<div class="form-item cf">
  <label class="item-label"> 客服模式: <span class="check-tips">启用多客服模式只能客服结束会话或者2小时内无互动才能关闭会话，或者设定自定义菜单退出客服,见说明</span></label>
  <div class="controls">
      <div class="check-item">
      <input type="radio" name="config[model]" value="1" class="regular-radio" id="config[model]_1" >
      <label for="config[model]_1"></label>多客服
      </div>
    <div class="check-item hidden">
      <input type="radio" name="config[model]" value="0" class="regular-radio" id="config[model]_0" >
      <label for="config[model]_0"></label>系统处理(暂时无效)
      </div>
  </div>
</div>

<div class="form-item cf">
  <label class="item-label"> 退出人工客服: <span class="check-tips">设置用户手动退出人工客服关键词</span></label> 
  <div class="controls">
    <input type="text" name="config[tcrg]" class="text input-large" value="{$data.config.tcrg.value}">
  </div>
</div>
</div><!--客服在线自定义回复配置-结束-->

<!--回复客服列表设置开始-->
<div class=" showdiv showdiv4">

<div class="offline" >

<div class="form-item cf">
  <label class="item-label"> 查询在线客服列表关键词: <span class="check-tips">只有设置了关键词指定客服或者指定客服分组有在线的才会显示，支持多个关键词查询，关键词之间用 “|” 隔开</span></label>
  <div class="controls">
    <input type="text" name="config[cxkey]" class="text input-large" value="{$data.config.cxkey.value}">
  </div>
</div>

<div class="form-item cf">
  <label class="item-label"> 回复在线客服列表--类型: </label>
  <div class="controls">
      <div class="check-item">
      <input type="radio" name="config[type3]" value="1" class="regular-radio" id="config[type3]_1" >
      <label for="config[type3]_1"></label>文本
      </div>
    <div class="check-item">
      <input type="radio" name="config[type3]" value="3" class="regular-radio" id="config[type3]_3" >
      <label for="config[type3]_3"></label>图文
      </div>
  </div>
</div>

<div class="form-item cf">
  <label class="item-label"> 标题: </label>
  <div class="controls">
    <input type="text" name="config[title3]" class="text input-large" value="{$data.config.title3.value}">
  </div>
</div>

<div class="form-item cf ">
  <label class="item-label"> 图片: <span class="check-tips">图片链接，支持JPG、PNG格式，较好的效果为大图360*200，小图200*200</span> </label>
  
                               <div class="controls uploadrow2  pull-left" title="点击修改图片" rel="pic_url3">
                                  <input type="file" id="upload_picture_pic_url3">
                                  <input type="hidden" name="config[pic_url3]" id="cover_id_pic_url3" value="{$data.config.pic_url3.value}"/>
                                  <div class="upload-img-box cover_id_pic_url3">
                                    <notempty name="data.config.pic_url3.value">
                                        <img src="{$data.config.pic_url3.value|get_cover_url}"/>
                                        <em class="edit_img_icon">&nbsp;</em>
                                    </notempty>
                                  </div>

                              </div>
                              <div class='image_material' id='image_material'>
                                  <a class="select_image" href="javascript:;"  onClick="$.WeiPHP.openImageMsg('{:U('/Home/Material/picture_config')}',selectImageCallback,'选择图片素材','pic_url3')">选择素材库</a>
                                  <a class="delete" onClick="delImage('pic_url3')" href="javascript:;">清除图片</a>
                              </div>

</div>

<div class="form-item cf">
  <label class="item-label"> 客服列表顶部内容区: </label>
  <div class="controls">
    <label class="textarea input-large">
      <textarea name="config[description_head]">{$data.config.description_head.value}</textarea>
    </label>
  </div>
</div>

<div class="form-item cf">
  <label class="item-label"> 客服列表底部内容区: </label>
  <div class="controls">
    <label class="textarea input-large">
      <textarea name="config[description_foot]">{$data.config.description_foot.value}</textarea>
    </label>
  </div>
</div>

</div>
</div><!--回复客服列表设置结束-->

</br>


<script type="text/javascript">
  $(function(){
        //初始化上传图片插件
        initUploadImg({width:308,height:200,callback:function(file, data, name, is_mult,opts){
          if (data < 0) {
            updateAlert('图片传失败，请重新上传！','alert-error');
            return;
          };
           //存入素材库
         $.post("{:U('Material/add_picture')}",{cover_id:data,src:name},function(data){
           if(data.status==1){
            updateAlert('图片上传成功，已保存在图片素材库！' ,'alert-success');
           }else{
            updateAlert('图片传成功，保存素材库失败！','alert-error');
           }    
         });


        }});
       initUploadFile();
       //支持tab
       showTab();
  })

//选取图片素材后的返回处理
function selectImageCallback(_this,inpuname){

  $('.cover_id_'+inpuname).html($(_this).html()).show();
  $('.image_material .delete').show();

  $('input[name="config['+inpuname+']"]').val($(_this).data('cover_id'));
  $.Dialog.close();
  $('.uploadrow2 .upload-img-box .upload-pre-item2 img').each(function() {

         $(this).css("width", 306); // 设定图片显示的宽度

         $(this).css("height", 198);  // 设定图片显示的高度
  });
}

//清除图片
function delImage(inputname){
  $('.uploadrow2 .cover_id_'+inputname).html('').hide();
  $('input[name="config['+inputname+']"]').val(0);
}
//导航菜单切换选项
function change(type){
  $(".showdiv").each(function(){
    $(this).hide(); 
  });

  $('.showdiv'+type).each(function(){
    $(this).show();
  });

  $(".showstate").each(function(){
    $(this).hide();
  });

  if (type == 1) {
    var val = $("input[name='config[state]']:checked").val();
     $('.showstate'+val).each(function(){
       $(this).show();
     });
  };
}
//微信客服开启关闭切换选项
function changeOption(){
  $(".showstate").each(function(){
    $(this).hide();
  });
  
  var val = $("input[name='config[state]']:checked").val();
  $('.showstate'+val).each(function(){
    $(this).show();
  });
}


$(function(){
  //客服是否在线状态处理
  var state = "{$data.config.state.value|intval}";   
  $("input[name='config[state]'][value="+state+"]").attr("checked",true); 
 
  //客服不在线回复内容类型处理
  var type = "{$data.config.type.value|intval}";  
  $("input[name='config[type]'][value="+type+"]").attr("checked",true); 


  //客服查询在线客服列表回复内容类型处理
  var type3 = "{$data.config.type3.value|intval}";  
  $("input[name='config[type3]'][value="+type3+"]").attr("checked",true); 

  //客服在线客服模式处理
  var model = "{$data.config.model.value|intval}";
  $("input[name='config[model]'][value="+model+"]").attr("checked",true); 

  //开启手机多客服助手接待处理
  var model2 = "{$data.config.model2.value|intval}";
  $("input[name='config[model2]'][value="+model2+"]").attr("checked",true); 

  change(1);
  changeOption();
})

</script>